{% block sw_category %}
<sw-page
    class="sw-category"
    :class="pageClasses"
>
    <template #search-bar>
        {% block sw_category_search_bar %}
        <sw-search-bar
            ref="searchBar"
            initial-search-type="category"
            :initial-search="term"
            type-search-always-in-container
            @search="onSearch"
        />
        {% endblock %}
    </template>

    <template #smart-bar-header>
        {% block sw_category_smart_bar_header %}
        <h2 v-if="category">
            {{ placeholder(category, 'name') }}
        </h2>
        <h2 v-else>
            {{ $tc('sw-category.general.headlineCategories') }}
        </h2>
        {% endblock %}
    </template>

    <template #language-switch>
        {% block sw_category_language_switch %}
        <sw-language-switch
            :save-changes-function="saveOnLanguageChange"
            :abort-change-function="abortOnLanguageChange"
            :disabled="landingPageId === 'create'"
            @on-change="onChangeLanguage"
        />
        {% endblock %}
    </template>

    <template #smart-bar-actions>
        <template v-if="category || landingPage">
            {% block sw_category_smart_bar_abort %}
            <mt-button
                v-tooltip.bottom="tooltipCancel"
                :disabled="isLoading"
                variant="secondary"
                size="default"
                @click="cancelEdit"
            >
                {{ $tc('global.default.cancel') }}
            </mt-button>
            {% endblock %}

            {% block sw_category_smart_bar_save %}

            {% block sw_category_smart_bar_save_category %}
            <sw-button-process
                v-if="category"
                v-tooltip.bottom="tooltipSave"
                class="sw-category-detail__save-action"
                :is-loading="isLoading"
                :process-success="isSaveSuccessful"
                :disabled="isLoading || !acl.can('category.editor')"
                variant="primary"
                @update:process-success="saveFinish"
                @click.prevent="onSave"
            >
                {{ $tc('sw-category.general.buttonSafeCategory') }}
            </sw-button-process>
            {% endblock %}

            {% block sw_category_smart_bar_save_landing_page %}
            <sw-button-process
                v-if="landingPage"
                v-tooltip.bottom="landingPageTooltipSave"
                class="sw-category-detail__save-landing-page-action"
                :is-loading="isLoading"
                :process-success="isSaveSuccessful"
                :disabled="isLoading || !acl.can('landing_page.editor')"
                variant="primary"
                @update:process-success="saveFinish"
                @click.prevent="onSaveLandingPage"
            >
                {{ $tc('sw-category.general.buttonSafeCategory') }}
            </sw-button-process>
            {% endblock %}
            {% endblock %}
        </template>
    </template>

    <template #side-content>
        {% block sw_category_side_content %}

        {% block sw_category_collapse %}
        <sw-sidebar-collapse
            class="sw-category-detail__category-collapse"
            :expand-on-loading="landingPageId === null"
        >
            <template #header>

                {% block sw_category_collapse_header %}
                <div
                    v-if="categoryCheckedItem > 0"
                    class="sw-category-detail__collapse-selected-count"
                >
                    {{ $tc(`sw-category.general.treeHeadSelected`, { count: categoryCheckedItem }) }}:
                </div>
                <div
                    v-else
                    class="sw-category-detail__collapse-headline"
                >
                    {{ $tc(`sw-category.general.treeHeadline`) }}
                </div>
                {% endblock %}

            </template>

            <template #actions>

                {% block sw_category_collapse_actions %}
                <div v-if="categoryCheckedItem > 0">
                    <mt-button
                        class="sw-tree-actions__delete_categories"
                        variant="critical"
                        size="small"
                        @click="onCategoryDelete"
                    >
                        {{ $tc('global.default.delete') }}
                    </mt-button>
                </div>
                {% endblock %}

            </template>

            <template #content>

                {% block sw_category_tree %}
                <sw-category-tree
                    ref="categoryTree"
                    :category-id="categoryId"
                    :current-language-id="currentLanguageId"
                    :allow-edit="acl.can('category.editor')"
                    :allow-create="acl.can('category.creator')"
                    :allow-delete="acl.can('category.deleter')"
                    @unsaved-changes="openChangeModal"
                    @category-checked-elements-count="categoryCheckedElementsCount"
                />
                {% endblock %}

            </template>
        </sw-sidebar-collapse>
        {% endblock %}

        {% block sw_landing_page_collapse %}
        <sw-sidebar-collapse
            class="sw-category-detail__landing-page-collapse"
            :expand-on-loading="landingPageId !== null"
        >
            <template #header>

                {% block sw_landing_page_collapse_header %}
                <div
                    v-if="landingPageCheckedItem > 0"
                    class="sw-category-detail__collapse-selected-count"
                >
                    {{ $tc(`sw-landing-page.general.treeHeadSelected`, { count: landingPageCheckedItem }) }}:
                </div>
                <div
                    v-else
                    class="sw-category-detail__collapse-headline"
                >
                    {{ $tc(`sw-landing-page.general.treeHeadline`) }}
                </div>
                {% endblock %}

            </template>

            <template #actions>

                {% block sw_landing_page_collapse_actions %}
                <div v-if="landingPageCheckedItem > 0">
                    <mt-button
                        class="sw-tree-actions__delete_categories"
                        variant="critical"
                        size="small"
                        @click="onLandingPageDelete"
                    >
                        {{ $tc('global.default.delete') }}
                    </mt-button>
                </div>
                {% endblock %}

            </template>

            <template #content>

                {% block sw_landing_page_tree %}
                <sw-landing-page-tree
                    ref="landingPageTree"
                    :landing-page-id="landingPageId"
                    :current-language-id="currentLanguageId"
                    :allow-edit="acl.can('landing_page.editor')"
                    :allow-create="acl.can('landing_page.creator')"
                    :allow-delete="acl.can('landing_page.deleter')"
                    @unsaved-changes="openChangeModal"
                    @landing-page-checked-elements-count="landingPageCheckedElementsCount"
                />
                {% endblock %}

            </template>
        </sw-sidebar-collapse>
        {% endblock %}
        {% endblock %}
    </template>

    {% block sw_category_content %}
    <template #content>

        <template v-if="isLoading">
            <sw-skeleton variant="detail-bold" />
            <sw-skeleton />
        </template>

        <div
            v-else
            class="sw-category__content"
        >
            {% block sw_category_content_view %}
            <sw-category-view
                v-if="category"
                ref="categoryView"
                :is-loading="isLoading"
                :type="category.type"
            />
            {% endblock %}

            {% block sw_category_content_entry_point_overwrite_modal %}
            <sw-category-entry-point-overwrite-modal
                v-if="showEntryPointOverwriteModal"
                :sales-channels="entryPointOverwriteSalesChannels"
                @cancel="cancelEntryPointOverwrite"
                @confirm="confirmEntryPointOverwrite"
            />
            {% endblock %}

            {% block sw_landing_page_content_view %}
            <sw-landing-page-view
                v-if="landingPage"
                ref="landingPageView"
                :is-loading="isLoading"
            />
            {% endblock %}

            {% block sw_category_content_discard_changes_modal %}
            <sw-discard-changes-modal
                v-if="isDisplayingLeavePageWarning"
                @keep-editing="onLeaveModalClose(nextRoute)"
                @discard-changes="onLeaveModalConfirm(nextRoute)"
            />
            {% endblock %}

            {% block sw_category_content_empty %}
            <mt-empty-state
                v-if="showEmptyState"
                :centered="true"
                :icon="$route.meta.$module.icon"
                :headline="$t('sw-category.general.emptyStateHeadline')"
                :description="$t($route.meta.$module.description)"
            />
            {% endblock %}
        </div>
    </template>
    {% endblock %}

</sw-page>
{% endblock %}
